/* 以下是重要代码 */

/* 图标阴影，附加样式 start */
.icon-shadow {
	box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.26);
}

/* 小圆点 附加样式*/
.icon-circle {
	width: 16rpx;
	height: 16rpx;
	font-size: 60rpx;
	border-radius: 50%;
	margin-bottom: 50rpx;
	position: relative;
	z-index: 1;
}

/* 3D立体效果 附加样式 start */
.icon-three {
	position: absolute;
	top: 50%;
	right: 50%;
	bottom: 50%;
	left: 50%;
	transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
	text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
}

/* 随机背景色转文字颜色 附加样式 start */
.icon-color-clip {
	// background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12);
	// background-image: linear-gradient(135deg, #ED1C24, #FECE12);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
}

/* 温馨提示：为什么那么多重复的代码？因为方便用户微调对应的样式，且不相互影响，或者只拿对用的图标样式代码也可以直接使用*/

.icon {
	&__item {
		/* 为了布局的而已*/
		// background-color: #FFFFFF;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.2s linear;
		transform-origin: center center;

		/* 字体形式*/
		&--icon1 {
			width: 100rpx;
			height: 100rpx;
			font-size: 60rpx;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
			}
		}

		/*新拟态 */
		&--icon2 {
			width: 100rpx;
			height: 100rpx;
			font-size: 60rpx;
			border-radius: 50%;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;
			box-shadow: 0px 10px 30px rgba(70, 23, 129, 0.12), 0px -8px 40px rgba(255, 255, 255, 1), inset 0px -10px 10px rgba(70, 23, 129, 0.05),
				inset 0px 10px 20px rgba(255, 255, 255, 1);
		}

		/* 正圆*/
		&--icon3 {
			width: 100rpx;
			height: 100rpx;
			font-size: 60rpx;
			border-radius: 50%;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url('/static/iconbg/icon_bg.png');
			}
		}

		/* 超椭圆*/
		&--icon4 {
			width: 100rpx;
			height: 100rpx;
			font-size: 60rpx;
			transform: rotate(-19deg);
			border-radius: 43% 57% 43% 57% / 57% 43% 57% 43%;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url('/static/iconbg/icon_bg5.png');
			}
		}

		/* 圆角*/
		&--icon5 {
			width: 100rpx;
			height: 100rpx;
			font-size: 60rpx;
			border-radius: 25%;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url('/static/iconbg/icon_bg6.png');
			}
		}

		/* 三角弧*/
		&--icon6 {
			width: 100rpx;
			height: 100rpx;
			font-size: 60rpx;
			border-radius: 68% 32% 40% 60% / 44% 34% 66% 56%;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url('/static/iconbg/icon_bg3.png');
			}
		}

		/* 花花*/
		&--icon7 {
			width: 60rpx;
			height: 100rpx;
			font-size: 60rpx;
			border-radius: 100rpx;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;

			&::before {
				transform: rotate(60deg);
				position: absolute;
				width: inherit;
				height: inherit;
				border-radius: inherit;
				background: inherit;
				content: '';
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				opacity: 0.8;
			}
			&::after {
				transform: rotate(-60deg);
				position: absolute;
				width: inherit;
				height: inherit;
				border-radius: inherit;
				background: inherit;
				content: '';
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				opacity: 0.8;
			}
		}

		/* 胶囊*/
		&--icon8 {
			width: 80rpx;
			height: 65rpx;
			font-size: 45rpx;
			border-radius: 200rpx;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url('/static/iconbg/icon_bg6.png');
			}
		}

		/* 暗黑金边*/
		&--icon9 {
			width: 100rpx;
			height: 100rpx;
			font-size: 60rpx;
			border-radius: 50%;
			border: 6rpx solid #ffca28;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url('/static/iconbg/icon_bg6.png');
			}
		}

		&--title {
			width: 100%;
			text-align: center;
		}
	}
}

/* 标签形式-使用单独配色，例如有的用户需要其他颜色 */
/* 
  .bg-label1.light {
    color: #ff3434;
    background: #fadbd9;
  }
  
  .bg-label2.light {
    color: #7fd02b;
    background: #eaf8f5;
  }
  
  .bg-label3.light {
    color: #0070ff;
    background: #e5f1ff;
  }
  
  .bg-label4.light {
    color: #9ddb47;
    background: #e8f4d9;
  }
  
  .bg-label5.light {
    color: #f39902;
    background: #fde6d2;
  }
  
  .bg-label6.light {
    color: #7f2d00;
    background: #ede1d9;
  }
  
  .bg-label7.light {
    color: #ff4f94;
    background: #f9d7ea;
  }
  
  .bg-label8.light {
    color: #6f68df;
    background: #e1d7f0;
  }
  
  .bg-label9.light {
    color: #9c26b0;
    background: #ebd4ef;
  }
  
  .bg-label10.light {
    color: #19cf8a;
    background: #d2f1f0;
  }
  
  .bg-label11.light {
    color: #8799a3;
    background: #e7ebed;
  }
  */

@media screen and (min-width: 1201px) {
	.icon {
		&__item {
			width: 10%;
		}
	}
}

@media screen and (max-width: 1200px) {
	.demo {
		display: none;
	}
	.icon {
		&__item {
			width: 18%;
		}
	}
}

@media screen and (max-width: 800px) {
	.icon {
		&__item {
			width: 20%;
		}
	}
}

@media screen and (max-width: 400px) {
	.icon {
		&__item {
			width: 20%;
		}
	}
}

@media screen and (min-width: 400px) {
	.tips-fixed {
		display: none;
	}
}
